<template>
    <el-form :model="form" label-width="140px">
        <el-form-item label="rodEnum：">
            <el-input v-model="form.rodEnum"/>
        </el-form-item>
        <el-form-item label="项目ID：">
            <el-input v-model="form.projectId"/>
        </el-form-item>
        <el-form-item label="录制时长：">
            <el-input v-model="form.recordSeconds" type="number">
                <template #append>秒</template>
            </el-input>
        </el-form-item>
        <el-form-item label="录像文件片段时长：">
            <el-input v-model="form.sliceDuration" type="number">
                <template #append>分</template>
            </el-input>
        </el-form-item>
        <el-form-item label="任务重试次数：">
            <el-slider v-model="form.retryNum" :step="1" show-stops max="5"/>
        </el-form-item>
        <el-form-item label="码流类型：">
            <el-select v-model="form.streamType" placeholder="please select">
                <el-option label="高清" :value="1"/>
                <el-option label="标清" :value="2"/>
            </el-select>
        </el-form-item>
        <el-form-item label="录制视频声音：">
            <el-select v-model="form.voiceSwitch" placeholder="please select">
                <el-option label="关" :value="0"/>
                <el-option label="开" :value="1"/>
                <el-option label="自动" :value="2"/>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="emit('closeView')">Cancel</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import {inject, reactive} from 'vue'
import axios from 'axios'
import {ElMessage, ElMessageBox} from 'element-plus'

const emit = defineEmits(['closeView'])

// 使用 inject 获取全局变量
const $host: string = inject('$host');
axios.defaults.baseURL = $host

// do not use same name with ref
const form = reactive({
    rodEnum: 'B',
    projectId: '001',
    recordSeconds: 86400,
    sliceDuration: 30,
    retryNum: 0,
    streamType: 1,
    voiceSwitch: 2,
})

const onSubmit = () => {
    console.log('submit!')
    console.log(form)
    axios({
        method: 'POST',
        url: '/cloud/video/instant/record',
        params: form
    }).then(({data}) => {
        if (data.code === 200) {
            ElMessageBox.alert(data.data)
        }
    })
}
</script>
